<!doctype html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../style/fjol_style.css"/>
		<link href="../css/xzx_style.css" rel="stylesheet" />
    	<!--<link href="../iconfont/iconfont.css" rel="stylesheet" />-->
		<link href="../css/xzx_image_viewer.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css"/>
	</head>
<style>
	.swiper-wrapper{
		width: 100%;
	}
	.imgInfo{
		bottom: 0;
		left: 0; right: 0;
		z-index: 2;
		color: white;
		position: fixed;
		height: 100px;
	}
	.over{
		overflow: hidden;
	}
</style>
	<body>
		
		<header class="mui-bar mui-bar-nav xa-nav newbgRed">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div class="mui-title" style="top: 0;">户型详情</div>
		</header>
		<div class="mui-content">
			
			<!--swiper轮播-->
			<div class="swiper-container">
			    <div class="swiper-wrapper" id="swiperWrap">
			    	
			    </div>
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/xzx.open.js"></script>
		<script id="photoListTmpl" type="text/x-jquery-tmpl">
			<div class="swiper-slide">
				<img src="${coverImage}" style="max-width: 100%;"/>
				<div class="imgInfo">
					<div class="xzx-layout-detail-content over">
						<div class="mui-pull-left">
							<span class="xzx-layout-detail-title">${title}</span>
							<span class="xzx-layout-detail-subtitle">均价${averagePrice?averagePrice:0}元/套</span>
						
							<div>${bedRoomNumber}室${livingRoomNumber}厅${toiletNumber}卫&nbsp;&nbsp;
							<span>建筑面积${square}㎡&nbsp;&nbsp;</span>
							<span>${orientations}</span>
							</div>
						<div>
						{{if $item.keywords()>0}}
							{{each(i,word) $item.keywords()}}
							<button type="button" class="mui-btn mui-btn-grey mui-btn-outlined">${word}</button>
							{{/each}}
						{{/if}}
						</div>
						</div>
					<div class="mui-pull-right">
						<span class="mui-icon collectionIcon" id="${id}" data-collect="${collectionId}" onclick="collected(this);" style="color: white;">
					    	<i class=""></i><em class="f08 newYellow"></em>
					    </span>
					</div>
					</div>
				</div>
			</div>
		</script>
		
		<script type="text/javascript">
			var _listData;
			var _index;
			mui.init({
				beforeback:function(){
					//获得父页面的webview
        			var wobj = plus.webview.currentWebview().opener();
        			wobj.reload(true);	//刷新
				}
			});

			mui.plusReady(function() {
					
				var wv = plus.webview.currentWebview();
				_listData = wv.listData;
				_index = wv.index;
				$('#photoListTmpl').tmpl(_listData,{
					keywords:function(){
						var words = this.data.keyword;
						if(words){
							return words;
						}else{
							return 0;
						}
					},
					averagePrice:function(){
						var price = this.data.averagePrice?this.data.averagePrice:0;
						return price;
					}
				}).appendTo('#swiperWrap');
				
				
				var winHeight = $(window).height()-$('.xa-nav').outerHeight();
				$('.swiper-wrapper').css('height',winHeight);
				var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'horizontal',
//				    loop: true,
//				    autoplay:4000,
				    autoplayDisableOnInteraction : false,	//false：用户操作后自动不会停止
				    // 如果需要分页器
				    pagination: '.mui-title',
				    paginationType : 'fraction',
				  });
				  
				 
				var imgObj = $('#swiperWrap img');
				var winHeight = $(window).height();
//				console.log(imgObj.length);
				imgObj.each(function(){
					var thisHeight = $(this).height();
					var marginTop = parseFloat((winHeight-thisHeight-50)/2);
					$(this).css('margin-top',marginTop);
				});
				
				for (var k=0; k<_listData.length; k++) {
					var collection = $('.collectionIcon').eq(k);
					
					if(_listData[k].collectionId){
						collection.find('i').attr('class','icon-star');
						collection.find('em').text('已收藏');
					}else{
						collection.find('i').attr('class','icon-star1');
						collection.find('em').text('收藏');
					}
				}
			});
			
		function collected(obj){
				var userInfo = common.myStorage.getItem('userInfo');
				var collectId = obj.getAttribute('data-collect');
					var collectionIcon_iChild = obj.getElementsByTagName('i')[0];
					var this_class = collectionIcon_iChild.classList;
//					console.log(collectId);
					var loginTrue = isLogined();	//是否登录
					if(loginTrue){
						
					if(this_class.length==3){	//取消收藏
						collectionIcon_iChild.setAttribute('class','iconfont icon-star1');
						collectionIcon_iChild.nextSibling.innerHTML = '收藏';
						
						var paramCollection = [{
							key:'collectionId',
							value:collectId
						}];
						fjNetwork.post('fjzx/client/cancel-building-house-type-collection.json',paramCollection,function(data){
//							console.log(data.msg);
							mui.toast(data.msg);
						},function(message){
							mui.toast(message);
						})
					}else{						//点击收藏
						var param = [{
							key:'buildingHouseTypeId',
							value:obj.getAttribute('id')
						},{
							key:'clientId',
							value:userInfo.clientId
						}];
						collectionIcon_iChild.setAttribute('class','iconfont icon-star colorWhite');
						collectionIcon_iChild.nextSibling.innerHTML = '已收藏';
						fjNetwork.post('fjzx/client/add-building-house-type.json',param,function(data){
//							console.log(data);
							mui.toast(data.msg);
						},function(message){
//							console.log(message);
							mui.toast(message);
						})
					}
					
					}else{
						
					}
		}
		
		document.addEventListener('gobackDetail',function(){
			mui.back(function(){
				var wobj = plus.webview.currentWebview().opener();
        		wobj.reload(true);	//刷新
			});
		});
		 //////////////////是否登录////////////
	   function isLogined(){
	   	var userInfo = common.myStorage.getItem('userInfo');
	   	if(!userInfo){		//未登录的情况
	   		mui.confirm('请登录','提示',['立即登录','暂不登录'],function(e){
//	   			console.log(e.index);
	   			if(e.index == 0){		//立即登录
	   				openFileWindowWithPage('../personal_pages','login',{
	   					parentId:'layout_detail'
	   				});
	   			}
	   		});
	   		return false;
	   	}else{
	   		return true;
	   	}
	   }
		</script>
	</body>

</html>